<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="我的"
        right-text="设置"
        @click-right="$router.push('/setUserMsg')"
      />
    </header>
    <div class="my">
      <header>
        <van-uploader :after-read="afterRead" :max-size="1024 * 100" @oversize='oversize' >
        <van-image
          round
          width="1rem"
          height="1rem"
          :src="avatar"
        />
        </van-uploader>
        <div class="userName">
          <h4>{{nickName}}</h4>
          <small>{{userName}}</small>
        </div>
      </header>
      <van-grid column-num="5">
        <van-grid-item icon="photo-o" text="待付款"  @click='$router.push("/order")'/>
        <van-grid-item icon="photo-o" text="代发货" @click='$router.push("/order")'/>
        <van-grid-item icon="photo-o" text="待收货" @click='$router.push("/order")'/>
        <van-grid-item icon="photo-o" text="待评价" @click='$router.push("/order")'/>
        <van-grid-item icon="photo-o" text="已完成" @click='$router.push("/order")'/>
      </van-grid>
      <van-cell-group>
        <van-cell title="我的收藏" value="5" />
        <van-cell title="我的地址" value=">" />
        <van-cell title="我的购物车" value=">" @click='$router.push("/cart")' />
        <van-cell title="我的足迹" value=">" />
        <van-cell title="我的爱好" value=">" />
        <van-cell title="我的联系方式" value=">" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Uploader, Toast, Image as VanImage, Grid, GridItem, Cell, CellGroup } from 'vant'

import { getUserMsg, setUserMsg } from '../../api/index.js'

Vue.use(NavBar)
Vue.use(Uploader)
Vue.use(Toast)
Vue.use(VanImage)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Cell)
Vue.use(CellGroup)
export default {
  beforeRouteEnter (to, from, next) {
    if (localStorage.getItem('isLogin') === 'ok') {
      next()
    } else {
      next('/login')
    }
  },
  data () {
    return {
      userName: '昵称',
      nickName: '临时用户',
      tel: '',
      email: '',
      avatar: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2456468987,3284231714&fm=26&gp=0.jpg',
      birthday: '0',
      sex: 1,
      hobby: []
    }
  },
  mounted () {
    getUserMsg({
      userId: localStorage.getItem('userId')
    }).then(res => {
      const data = res.data.data
      if (data) {
        this.userName = data.userName
        this.nickName = data.nickName
        this.avatar = data.avatar
      }
    })
  },
  methods: {
    afterRead (file) {
      // 这个回调函数中有,file是一个对象
      // console.log(file.content)
      setUserMsg({
        userId: localStorage.getItem('userId'),
        userData: {
          avatar: file.content
        }
      }).then(res => {
        this.avatar = res.data.data.avatar
      })
    },
    oversize () {
      Toast('图片大小不允许超过100K')
    }
  }
}
</script>

<style lang="scss">
.my {
  header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.2rem;
    .userName {
      margin-left: 0.4rem;
    }
  }
}
</style>
